
<div style="height: {height}px;">
  <canvas ref:canvas width={gridSize} height={gridSize} style="width: 100%;"></canvas>
</div>

<script>
import { load } from 'lucid-components';
import classesToKeep from './classesToKeep.js';


import inceptionv1_mixed3a from "../public/_cache/inceptionv1_mixed3a/inceptionv1_mixed3a.json";
import inceptionv1_mixed3b from "../public/_cache/inceptionv1_mixed3b/inceptionv1_mixed3b.json";
import inceptionv1_mixed4a from "../public/_cache/inceptionv1_mixed4a/inceptionv1_mixed4a.json";
import inceptionv1_mixed4b from "../public/_cache/inceptionv1_mixed4b/inceptionv1_mixed4b.json";
import inceptionv1_mixed4c from "../public/_cache/inceptionv1_mixed4c/inceptionv1_mixed4c.json";
import inceptionv1_mixed4d from "../public/_cache/inceptionv1_mixed4d/inceptionv1_mixed4d.json";
import inceptionv1_mixed4e from "../public/_cache/inceptionv1_mixed4e/inceptionv1_mixed4e.json";
import inceptionv1_mixed5a from "../public/_cache/inceptionv1_mixed5a/inceptionv1_mixed5a.json";
import inceptionv1_mixed5b from "../public/_cache/inceptionv1_mixed5b/inceptionv1_mixed5b.json";

const configs = {
  inceptionv1_mixed3a: inceptionv1_mixed3a,
  inceptionv1_mixed3b: inceptionv1_mixed3b,
  inceptionv1_mixed4a: inceptionv1_mixed4a,
  inceptionv1_mixed4b: inceptionv1_mixed4b,
  inceptionv1_mixed4c: inceptionv1_mixed4c,
  inceptionv1_mixed4d: inceptionv1_mixed4d,
  inceptionv1_mixed4e: inceptionv1_mixed4e,
  inceptionv1_mixed5a: inceptionv1_mixed5a,
  inceptionv1_mixed5b: inceptionv1_mixed5b,
}

export default {
  data() {
    return {
      root: "https://storage.googleapis.com/distill-2019-activation-atlas/build",
      model: "inceptionv1",
      layerName: "mixed4d",
      grid: 1,
      layout: 0,
      gridSize: 10,
      classHeatmap: -1,
      icons: [],
      clientWidth: 45
    };
  },
  computed: {
    height: ({clientWidth}) => clientWidth,
    id: ({model, layerName}) => model + "_" + layerName
  },
  oncreate() {
    const {root, id, grid} = this.get();
    const config = configs[id]
    // console.log("config: ", config)
    if (config.class_filter == null) { config.class_filter = "None" }
    if (config.filter == null) { config.filter = "None" }
    if (!Array.isArray(config.layout)) {config.layout = [config.layout]}
    if (!Array.isArray(config.layer)) {config.layer = [config.layer]}
    if (!Array.isArray(config.filter)) {config.filter = [config.filter]}
    this.set({gridSize: config.grid_size[grid], layerName: config.layer[0]})
    const url = `${root}/${id}/web/web--grid_size=${config.grid_size[grid]}--layout=${config.layout[0]}--class_filter=${config.class_filter}--filter=${config.filter[0]}--layer=${config.layer[0]}--model=${config.model}--sample_images=${config.sample_images}--sample_type=${config.sample_type}.json`
    // console.log("config", config)
    load(url).then(web => {
      // console.log("web", web)
      this.set({icons: web});
      this.render();
    });
  },
  onupdate({changed}) {
    if (changed.classHeatmap) {
      this.render();
    }
  },
  methods: {
    render() {
      const {grid, gridSize, icons, classHeatmap, layerName} = this.get();
      const context = this.refs.canvas.getContext('2d');
      let imageData = context.getImageData(0, 0, gridSize, gridSize);
      let data = imageData.data;
      let flipX = false;
      let flipY = false;
      switch (layerName) {
        case "mixed4a":
          flipX = true;
          flipY = true;
          break;
        case "mixed4d":
          flipX = true;
          flipY = false;
          break;
        case "mixed5a":
          flipX = true;
          flipY = false;
          break;
        case "mixed5b":
          flipX = true;
          flipY = false;
          break;
      }
      // for (var i = 0; i < data.length; i += 4) {
        // data[i] = 100;
        // data[i + 1] = 100;
        // data[i + 2] = 100;
        // data[i + 3] = 255;
      // }
      for (const icon of icons) {
        let heatmapMultiplier = 1.0;
        if (classHeatmap > -1) {
          let ci = classesToKeep.indexOf(classHeatmap);
          let value = Math.max(0, icon.f[ci]);
          heatmapMultiplier = Math.max(0.1, value * 20);
          // console.log(ci, value)
        }
        const y = flipX ? (gridSize - icon.x - 1) : icon.x; //x,y switched on purpose 
        const x = flipY ? (gridSize - icon.y - 1) : icon.y; //x,y switched on purpose
        // data[y * gridSize * 4 + x * 4 + 0] = (heatmapMultiplier) * 255 * 20;
        // data[y * gridSize * 4 + x * 4 + 1] = (heatmapMultiplier) * 130 * 20;
        // data[y * gridSize * 4 + x * 4 + 2] = (heatmapMultiplier) * 1 * 20;
        data[y * gridSize * 4 + x * 4 + 3] = 40 + (gridSize > 20 ? 0.0008 : 0.00015) * gridSize * gridSize * (icon.n / Math.pow((grid + 1), 2)) * heatmapMultiplier;
      }
      
      context.putImageData(imageData, 0, 0);
    }
  }
}


</script>
<style>
canvas {
  image-rendering: pixelated;
}
</style>